<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-固定导航栏</title>
  <style>
    /* 样式初始化，清除默认的内外边距， * 星号表示选中所有标签 */
    * {
      margin: 0;
      padding: 0;
    }

    /* 图片底部空白是预留给文字对齐的，现在要去掉这些空白 */
    img {
      /* 改变图片的垂直对齐方式：middle 和文字中对齐 */
      vertical-align: middle;

      /* 改变图片标签的显示模式也可解决 */
      /* display: block; */
    }

    .center {
      /* 文本居中对齐，图片中对齐也可以用 */
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- 头部部分 -->
  <header class="center">
    <img src="./images/top.png" alt="">
  </header>
  <!-- 导航部分 - 需要做滚动固定 -->
  <nav class="center">
    <img src="./images/nav.png" alt="">
  </nav>
  <!-- 主体部分 -->
  <main class="center">
    <img src="./images/main.png" alt="">
  </main>
</body>

</html>